<template>
    <div class="category-blog">
        <div class="c-main">
            <div class="c-head">
                <img :src="proxy.globalInfo.imageUrl + categoryInfo.cover" alt="" @click="toRouter">
                <div class="l-content">
                    <div class="l-name" @click="toRouter">{{ categoryInfo.categoryName }}</div>
                    <div class="l-tips">{{ categoryInfo.categoryDesc }}</div>
                    <div class="l-num">文章:&nbsp;&nbsp;{{ categoryInfo.blogCount }}篇</div>
                </div>
            </div>
            <div class="c-content">
                <div v-if="blogDataInfo.list && blogDataInfo.list.length > 0">
                    <div v-for="(item, index) in blogDataInfo.list" :key="index">
                        <blog-card :cardObj="item" v-motion-slide-left></blog-card>
                    </div>
                </div>
                <div class="l-empty" v-else>
                    <a-empty description="没有数据" />
                </div>
            </div>
        </div>
        <div class="c-sider">
            <handle-card v-motion-slide-rigth title="sidebar.category" :cardList="categoryList"></handle-card>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import HandleCard from '@/components/handle-card.vue';
import BlogCard from '@/components/blog-card.vue';
const route = useRoute();
const { proxy } = getCurrentInstance();

const api = {
    loadBlogList: "/view/loadBlogList",
    loadCategory: "/view/loadCategory",
    getCategory: "view/getCategory"
};
const categoryId = ref(route.params.categoryId);
const blogDataInfo = ref({});
const loadBlogList = async (pageNo) => {
    pageNo = pageNo == null ? 1 : pageNo;
    let result = await proxy._request({
        url: api.loadBlogList,
        params: {
            categoryId: categoryId.value,
            pageSize: 200,
            pageNo,
        },
    });
    if (!result) {
        return;
    }
    blogDataInfo.value = result.data;
};
loadBlogList()
//获取分类详情
const categoryInfo = ref({});
const categoryDetail = async () => {
    let result = await proxy._request({
        url: api.getCategory,
        params: {
            categoryId: categoryId.value
        }
    })
    if (!result) {
        return;
    }
    categoryInfo.value = result.data;
}
categoryDetail();
//分类
const categoryList = ref([]);
const loacCategoryList = async () => {
    let result = await proxy._request({
        url: api.loadCategory,
        params: {
            pageSize: 5,
        },
    });
    if (!result) {
        return;
    }
    categoryList.value = result.data.map(v => {
        return {
            cover: proxy.globalInfo.imageUrl + v.cover,
            name: v.categoryName,
            count: v.blogCount,
            url: '/category/' + v.categoryId
        }
    });
};
loacCategoryList();

</script>

<style lang="scss" scoped>
.category-blog {
    width: 100%;
    height: 100%;
    display: flex;

    .c-main {
        flex: 1;
        margin-right: 20px;

        .c-head {
            width: 100%;
            height: 130px;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 4px;
            padding: 10px 20px 10px 20px;

            img {
                width: 100px;
                height: 100px;
                border-radius: 4px;
                margin-right: 20px;
            }

            .l-content {
                height: 100%;
                padding: 4px 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .l-name {
                    color: $font-color-primary;
                    cursor: pointer;
                }

                .l-num {
                    font-size: 12px;
                    color: #919da9;
                }
            }
        }

        .c-content {
            margin-top: 30px;
            background-color: #fff;
            border-radius: 4px;
            padding: 30px 20px 10px 20px;
            box-sizing: border-box;
        }
    }

    .c-sider {
        width: 300px;
    }
}
</style>